// components/Domain/DomainForm.tsx
import React from 'react';
import { useForm } from 'react-hook-form';
import Button from '../Common/Button';
import Modal from '../Common/Modal';

export interface DomainFormData {
  name: string;
  description?: string;
  vcpu: number;
  memory: number;
  disk: number;
  osType: 'linux' | 'windows' | 'other';
  network: string;
  graphics: 'vnc' | 'spice' | 'none';
  autoStart: boolean;
}

export interface DomainFormProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (data: DomainFormData) => void;
  initialData?: Partial<DomainFormData>;
  loading?: boolean;
}

const DomainForm: React.FC<DomainFormProps> = ({
  isOpen,
  onClose,
  onSubmit,
  initialData,
  loading = false
}) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset
  } = useForm<DomainFormData>({
    defaultValues: {
      vcpu: 2,
      memory: 2048,
      disk: 20480,
      osType: 'linux',
      graphics: 'vnc',
      autoStart: false,
      ...initialData
    }
  });

  React.useEffect(() => {
    if (isOpen) {
      reset({
        vcpu: 2,
        memory: 2048,
        disk: 20480,
        osType: 'linux',
        graphics: 'vnc',
        autoStart: false,
        ...initialData
      });
    }
  }, [isOpen, initialData, reset]);

  const handleFormSubmit = (data: DomainFormData) => {
    onSubmit(data);
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title={initialData ? 'Edit Virtual Machine' : 'Create Virtual Machine'}
      size="lg"
    >
      <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* �@�o */}
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Name *
              </label>
              <input
                {...register('name')}
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-800 dark:text-white"
                placeholder="Enter VM name"
              />
              {errors.name && (
                <p className="text-red-500 text-sm mt-1">{errors.name.message}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Description
              </label>
              <textarea
                {...register('description')}
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-800 dark:text-white"
                rows={3}
                placeholder="Enter description"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Operating System
              </label>
              <select
                {...register('osType')}
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-800 dark:text-white"
              >
                <option value="linux">Linux</option>
                <option value="windows">Windows</option>
                <option value="other">Other</option>
              </select>
            </div>
          </div>

          {/* D�Mn */}
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                vCPU Cores *
              </label>
              <input
                type="number"
                {...register('vcpu', { valueAsNumber: true })}
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-800 dark:text-white"
                min="1"
                max="32"
              />
              {errors.vcpu && (
                <p className="text-red-500 text-sm mt-1">{errors.vcpu.message}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Memory (MB) *
              </label>
              <input
                type="number"
                {...register('memory', { valueAsNumber: true })}
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-800 dark:text-white"
                min="1024"
                max="65536"
              />
              {errors.memory && (
                <p className="text-red-500 text-sm mt-1">{errors.memory.message}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Disk Size (MB) *
              </label>
              <input
                type="number"
                {...register('disk', { valueAsNumber: true })}
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-800 dark:text-white"
                min="1024"
                max="1048576"
              />
              {errors.disk && (
                <p className="text-red-500 text-sm mt-1">{errors.disk.message}</p>
              )}
            </div>
          </div>
        </div>

        {/* ا�n */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              Network
            </label>
            <input
              {...register('network')}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-800 dark:text-white"
              placeholder="default"
            />
            {errors.network && (
              <p className="text-red-500 text-sm mt-1">{errors.network.message}</p>
            )}
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              Graphics
            </label>
            <select
              {...register('graphics')}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-800 dark:text-white"
            >
              <option value="vnc">VNC</option>
              <option value="spice">SPICE</option>
              <option value="none">None</option>
            </select>
          </div>
        </div>

        <div className="flex items-center">
          <input
            type="checkbox"
            {...register('autoStart')}
            className="w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
          />
          <label className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
            Auto-start on boot
          </label>
        </div>

        <div className="flex justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
          <Button
            variant="outline"
            onClick={onClose}
            disabled={loading}
          >
            Cancel
          </Button>
          <Button
            type="submit"
            loading={loading}
            disabled={loading}
          >
            {initialData ? 'Update' : 'Create'} Virtual Machine
          </Button>
        </div>
      </form>
    </Modal>
  );
};

export default DomainForm;